<template>
	<div class="content">
		<div class="conttitle">
			<div style="height: 100%;">
				<div class="name"><span>蒋峰</span><span>本人</span></div>
				<div style="margin-top: 20px;" class="phone">622*********0909</div>
			</div>
			<div style="margin-top: 20px;" class="mor">
				<div class="name"><img src="@/static/cut.png" style="width: 20px;height: 20px;"></div>
				<div class="phone">切换就诊人</div>
			</div>
		</div>
		<div class="timezou">
			<div class="lasttime">近一年</div>
			<div class="choosetime">选择时间
				<img src="@/static/bottom.png"
					style="width: 20px;height: 20px;vertical-align: middle;margin-left: 3px;">
			</div>
		</div>
		<div @click="detail">
			<div class="cart" style="margin-top: 20px;">
				<div>
					<div class="godname">特需病院区</div>
					<div class="godhospname">住院人 蒋峰</div>
					<div class="godhospname">入院日期 2020/10/09</div>
					<div class="godhospname">出院日期 2020/10/09</div>
				</div>
				<div style="text-align: right;">
					<div
						style="border-radius: 50px; background: #efefef;padding: 2px 10px; color: #ccc1d5; font-size: 15px; margin-bottom: 20px;letter-spacing: 2px;">
						已出院</div>
					<div class="money">¥60.00</div>
				</div>
			</div>
			<div class="cart" style="margin-top: 20px;">
				<div>
					<div class="godname">特需病院区</div>
					<div class="godhospname">住院人 蒋峰</div>
					<div class="godhospname">入院日期 2020/10/09</div>
					<div class="godhospname">出院日期 2020/10/09</div>
				</div>
				<div style="text-align: right;">
					<div
						style="border-radius: 50px; background: #efefef;padding: 2px 10px; color: #ccc1d5; font-size: 15px; margin-bottom: 20px;letter-spacing: 2px;">
						已出院</div>
					<div class="money">¥60.00</div>
				</div>
			</div>
			<div class="cart" style="margin-top: 20px;">
				<div>
					<div class="godname">特需病院区</div>
					<div class="godhospname">住院人 蒋峰</div>
					<div class="godhospname">入院日期 2020/10/09</div>
					<div class="godhospname">出院日期 2020/10/09</div>
				</div>
				<div style="text-align: right;">
					<div
						style="border-radius: 50px; background: #efefef;padding: 2px 10px; color: #ccc1d5; font-size: 15px; margin-bottom: 20px;letter-spacing: 2px;">
						已出院</div>
					<div class="money">¥60.00</div>
				</div>
			</div>
		</div>
		<div class="back">
			<div class="white">
				<div class="people">
					<span>选择就诊人</span>
					<span>×</span>
				</div>
				<div class="any">
					<div>
						<div class="name"><span>蒋峰</span><span>本人</span></div>
						<div style="margin-top: 20px;" class="phone">622*********0909</div>
					</div>
					<div>
						<div>></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
detail(){
	uni.navigateTo({
		url:"../../../hospitalizationServices/pages/recharge/detail"
	})
}

		}
	}
</script>

<style>
	.whtie {
		width: 100%;
		height: 100px;
		background: #FFF;
		position: relative;
	}

	.any {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 15px;
	}

	.back {
		z-index: 999;
		background: rgb(101, 102, 102);
	}

	.money {
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 20px;
		color: #F46363;
	}

	.gomove {
		margin-top: 10px;
		border-radius: 5px;
		width: 72px;
		height: 32px;
		font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
		font-weight: 500;
		font-style: normal;
		color: #FFFFFF;
		line-height: 20px;
		background-color: #006EFF;
		font-size: 14px;
		line-height: 32px;
		text-align: center;
	}

	.godname {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 18px;
		color: #555555;
		margin: 5px 0;
	}

	.godhospname {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 15px;
		color: #AAAAAA;
		margin: 5px 0;

	}

	.cart {
		margin-bottom: 20px;
		padding: 10px 15px;
		border: 1px solid #f2f2f2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
	}

	.choose {
		display: flex;
	}

	.zoi {
		flex: 1;
		background-color: #f2f2f2;
		color: #5c5c5c;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
		border-radius: 10px;
	}

	.zoif {
		flex: 1;
		background-color: #e3efff;
		color: #0e75ff;
		border: 1px solid #006eff;
		border-radius: 10px;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
	}

	.h1 {
		margin: 20px 0px;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 17px;
	}

	.balance div:nth-child(1) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 15px;
		color: #555555;
	}

	.balance div:nth-child(2) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 18px;
		color: #555555;
	}

	.balance {
		padding: 0 15px;
		margin-top: 10px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #f2f2f2;
		background-color: #ffffff;
	}

	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		text-align: center;
		font-size: 12px;
	}

	.phone {
		margin-top: 10px;
		font-weight: 200;
		font-style: normal;
		font-size: 12px;
		color: #AAAAAA;
	}

	.name span:nth-child(1) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 16px;
		color: #555555;
	}

	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 16px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 4px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}

	.conttitle {
		background-color: #f5f9ff;
		height: 60px;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 15px;
		justify-content: space-between;
		margin-top: 10px;
	}

	.content {
		padding: 30px 15px;
	}

	.choosetime {
		padding: 5px 10px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 14px;
		letter-spacing: 1px;
		color: #4998ff;
		background-color: #e4f0ff;
		border-radius: 15px;
		margin-left: 15px;

	}

	.lasttime {
		padding: 5px 15px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 14px;
		letter-spacing: 1px;
		color: #f5f9ff;
		background-color: #006eff;
		border-radius: 15px;

	}

	.timezou {
		display: flex;
		margin-top: 15px;
	}

	.dingmember {

		font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 41px;
		color: rgb(255, 255, 255);
		text-align: center;
		line-height: 40px;
	}

	.ding {
		margin-bottom: 10px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		font-weight: 200;
		letter-spacing: 1.7px;
		font-style: normal;
		font-size: 13px;
		color: #ffffff;
	}

	.order {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20px auto;
		background-color: #f9972b;
		width: 160px;
		height: 160px;
		border-radius: 160px;
		text-align: center;
	}

	.name {
		color: #AAAAAA;
		font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 14px;
		margin-right: 15px;
	}

	.name1 {
		font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 14px;
	}

	.choose {
		display: flex;
	}

	.zoi {
		flex: 1;
		background-color: #f2f2f2;
		color: #5c5c5c;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
		border-radius: 10px;
	}

	.zoif {
		flex: 1;
		background-color: #e3efff;
		color: #0e75ff;
		border: 1px solid #006eff;
		border-radius: 10px;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
	}

	.h1 {
		margin: 20px 0px;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 17px;
	}

	.balance div:nth-child(1) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 15px;
		color: #555555;
	}

	.balance div:nth-child(2) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 18px;
		color: #555555;
	}

	.balance {
		padding: 0 15px;
		margin-top: 10px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #f2f2f2;
		background-color: #ffffff;
	}

	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		text-align: center;
		font-size: 12px;
	}

	.phone {
		margin-top: 10px;
		font-weight: 200;
		font-style: normal;
		font-size: 12px;
		color: #AAAAAA;
	}

	.name span:nth-child(1) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 15px;
		color: #555555;
	}

	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 12px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 2px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}

	.conttitle {
		background-color: #f5f9ff;
		height: 80px;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 10px;
		justify-content: space-between;
		margin-top: 15px;
	}

	.content {
		padding: 30px 15px;
	}
</style>